/* components/song-item-v2/song-item-v2.wxss */
@import url(/styles/utils.less);
@import url(/styles/icomoon.less);

.press-effect {
  background-color: rgba(0, 0, 0, 0.1);
}

.controls-effect {
  background-color: rgba(0, 0, 0, 0.1);
  &::before {
    color: rgba(0, 0, 0, 0.6);
  }
}

.song-item-v2 {
  position: relative;
  // display: grid;
  // grid-template-columns: 90rpx 1fr min-content;
  display: flex;
  align-items: center;
  padding: 10rpx 0;
  height: 108rpx;
  font-size: 32rpx;

  .index {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90rpx;
    font-family: 'WeChatSans-Medium';
    color: #969799cc;
    margin: 0 8rpx 0 6rpx;
  }

  .svg-playing,
  .icon-playing {
    display: flex;
    justify-content: center;
    font-size: 40rpx;
    color: #fe231e;
    width: 40rpx;
    height: 40rpx;
  }

  .info {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex: 1;
    overflow: hidden;

    .name {
      .one-line-ellipsis();
      font-size: 32rpx;
      color: #333;
    }
    .artist {
      .one-line-ellipsis();
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #969799cc;

      .vip {
        margin-right: 8rpx;
        border: 1px solid;
        border-radius: 6rpx;
        color: #fe231e;
        font-size: 16rpx;
        font-weight: 500;
        transform: translateY(-2rpx);
      }
    }
  }

  .controls {
    display: flex;
    height: 100%;
    flex: none;
    margin-left: 8rpx;

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 46rpx;
      color: #a3a3a3;
      padding: 0 18rpx;
      border-radius: 10rpx;
    }
  }
}

// 歌曲不可用
.unavailable {
  .index,
  .name {
    color: #a3a3a3;
  }
  .svg-playing {
    color: #fe231e;
  }

  opacity: 0.4;
}
